﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="./resources/semantic/semantic.css">
    <link rel="stylesheet" type="text/css" href="./content/css/common.css">
    <link rel="stylesheet" type="text/css" href="./content/css/index.css">
    <script src="./resources/jquery/jquery-3.1.1.js"></script>
    <script src="./resources/semantic/semantic.js"></script>
    <script src="./resources/angular/angular.min.js"></script>

</head>
<body ng-app="app" ng-controller="ctrl" ng-cloak >
    <div class="ui sidebar vertical menu dxr_menu">
        <div style="text-align:center !important;padding:1em;">
            <img src="./content/imgs/logo.png" style="display:inline-block;width:80px;" />
        </div>
        <div class="icon active item" ng-click="menuClick(1);">
            <i class="laptop icon"></i> 数据资源服务
        </div>
        <div class="item" ng-click="menuClick(2);">
            菜单二
        </div>
        <div class="item" ng-click="menuClick(3);">
            菜单三
        </div>
    </div>
    <div class="pusher">
        <div class="ui text top attached menu dxr_head">
            <div class="item">
                <img src="./content/imgs/logo.png" />
            </div>
            <h3 class="item dxr_title">情报实战服务系统</h3>
            <div class="item">
                <pager></pager>
            </div>
            <div class="right item dxr_title personShow">
                <img class="ui avatar image" src="./content/imgs/jenny.jpg" />
                <span>欢迎您，管理员<i class="ui caret down icon"></i></span>
            </div>
            <div class="ui popup bottom left personPopup">
                <div class="ui vertical text menu" style="width:100px;">
                    <a class="item">
                        个人信息
                    </a>
                    <a class="item">
                        管理后台
                    </a>
                    <a class="item">
                        退出
                    </a>
                </div>
            </div>
        </div>
        <div class="dxr_body">
            <iframe src="{{url}}" style="width:100%;height:100%; border:none;"></iframe>
        </div>

        <div class="ui mini icon button dxr_menubtn" ng-click="showMenu()">
            <i class="content icon"></i>
        </div>
    </div>

    <script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('ctrl', ['$scope', '$http', '$interval', function ($scope, $http, $interval) {

            $('.personShow').popup({
                popup: $('.personPopup'),
                on: "click"
            });

            $scope.showMenu = function () {
                $('.ui.sidebar').sidebar('toggle');
            };

            $scope.url = "./views/iacs/information.html?UserId=1";

            $scope.menuClick = function (item) {
                switch (item) {
                    case 1:
                        $scope.url = "./views/iacs/information.html";
                        break;
                    case 2:
                        $scope.url = "./ui-examples/bootstrap.html";
                        break;
                    case 3:
                        $scope.url = "./ui-examples/grid.html";
                        break;
                }

                $('.menu .item').removeClass("active");
                $('.menu .item:eq(' + (item - 1) + ')').addClass("active");

                $('.ui.sidebar').sidebar('toggle');
            };

            $interval(function () {
                $('.dxr_menubtn').transition('tada');
            }, 3000).then(function () { }, function () { }, function () { });

        }]);
    </script>
</body>
</html>